<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>预约信息录入</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/left.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>

    <script src="js/vue.js"></script>
    <script>
        $(function () {
            var href = location.href;
            var classId = 0;
            if(href.indexOf("?")>0){
                var id = href.split("?")[1];
                classId = id.split("=")[1];
            }
            var vue = new Vue({
                el:'#app',
                data:{
                    url:'http://localhost:8889',
                    param:{stuId:0,coaName:'',subId:0},
                    classinfo:{},
                    students:[],
                    student:{},
                    phone:'',
                    periods:[]
                },

                methods:{
                    getClassInfo:function(){
                        var that = this;
                        if(classId>0){
                            $.getJSON(that.url+"/class/find/"+classId,function(data){
                                that.classinfo = data;
                                that.param.coaName =  data.coach.coaName;
                                that.param.subId = data.subject.subId;
                                console.log(that.classinfo)
                            });
                        }
                    },
                    getStudent:function(){
                        var that = this;
                        $.getJSON(that.url+"/student/findAll",function(data){
                            that.students = data;
                            console.log(that.students)
                        })


                    },
                    save:function() {
                        var that = this;
                        var info = {
                            stuId:that.param.stuId,
                            classId:classId

                        }
                        var qp = {
                            stuId :that.param.stuId,
                            subId:that.param.subId

                        }
                        //查询该学员是否以及完成了次科目的训练
                        $.getJSON(that.url+'/student/queryPeriod',qp,function(data){
                            that.periods = data.list[0];
                            if(data.list[0]){
                                var hour = that.periods.periodList[0].hour
                                var countTime = that.periods.subjectList[0].subTime
                                console.log(that.periods)
                                console.log(hour)
                                console.log(countTime)
                                if((countTime-hour)<=0){
                                    $("#msg").html("<span style='color:red'>该学生已完成此科目的训练！</span>");
                                }else{
                                    //先查询学生是否预约了今天的的课程，如果预约了则不可以再进行预约
                                    if(info.stuId==0){
                                        $("#msg").html("<span style='color:red'>请选择预约学员！</span>");
                                    }else{
                                        //查询他是否预约了今天的课程
                                        $.post(that.url+'/student/queryPeo/'+info.stuId+"/"+info.classId,info,function (data) {
                                            if(data){
                                                $("#msg").html("<span style='color:red'>你已经预约了科目！</span>");
                                            }else{
                                                var ps = {
                                                    stuId:that.param.stuId,
                                                    classSess:that.classinfo.classSess,
                                                    teaTime:that.classinfo.teaTime
                                                }
                                                $.post(that.url+'/student/querySess',ps,function (data) {
                                                    if(data){
                                                        $("#msg").html("<span style='color:red'>该学生以及预约了今天该场次的课程了！</span>");
                                                    }else{
                                                        //保存预约信息之前，先对课程预约人数+1
                                                        $.post(that.url+'/reverse/save',info,function (data) {
                                                            if(data !=null) {
                                                                $("#msg").html("<span style='color:darkgreen'>预约成功！</span>");
                                                            }else{
                                                                $("#msg").html("<span style='color:red'>预约失败！</span>");
                                                            }
                                                        })

                                                    }
                                                })


                                            }

                                        })

                                    }
                                }
                            }else{
                                //查询他是否预约了今天的课程
                                $.post(that.url+'/student/queryPeo/'+info.stuId+"/"+info.classId,info,function (data) {
                                    if(data){
                                        $("#msg").html("<span style='color:red'>你已经预约了科目！</span>");
                                    }else{
                                        var ps = {
                                            stuId:that.param.stuId,
                                            classSess:that.classinfo.classSess,
                                            teaTime:that.classinfo.teaTime
                                        }
                                        $.post(that.url+'/student/querySess',ps,function (data) {
                                            if(data){
                                                $("#msg").html("<span style='color:red'>该学生以及预约了今天该场次的课程了！</span>");
                                            }else{
                                                //保存预约信息之前，先对课程预约人数+1
                                                $.post(that.url+'/reverse/save',info,function (data) {
                                                    if(data !=null) {
                                                        $("#msg").html("<span style='color:darkgreen'>预约成功！</span>");
                                                    }else{
                                                        $("#msg").html("<span style='color:red'>预约失败！</span>");
                                                    }
                                                })

                                            }
                                        })


                                    }

                                })

                            }


                        })




                    },
                    schange:function(){
                        var that = this;
                        console.log($("#sele").val())
                        console.log(that.param.stuId)
                        var studentId = that.param.stuId;
                        if(studentId!=null){
                            $.getJSON(that.url+"/student/find/"+studentId,function(data){
                                that.phone = data.phone;
                            })
                        }
                    }

                },
            });
            vue.getClassInfo();
            vue.getStudent();
            $("#header").load("header.html");
            $("#left").load("left.html");
            $("#sele").change(function () {
            })
        })
    </script>
    <style>
        .input-group-addon{
            background: #fff}
        .mrow{
            margin-top:15px;padding:5px 15px;}
        .msg{
            padding-top:10px;font-size:16px;font-weight: bold}
        .bg {
            background:url(images/subject/bg2.jpg) no-repeat center fixed;
            background-size:100%;
        }
        .bgcon{

            background: white;
            opacity:0.9;
        }
        .jllb{

            margin-left:10px;
            margin-top:10px;
            margin-bottom:10px;
        }
        .remark{
            margin-bottom: 20px;
            margin-right: 10px;
            color: #737373;
        }
        .tithead{
            margin-left:5px;
            margin-bottom: 30px;
        }
        .read{
            background:#fff !important;
        }

    </style>
</head>
<body>
<div class="container-fluid bgcon" id="app">
    <div class="row" id="header">

    </div>
    <div class="row">
        <div class="col-md-2" id="left">

        </div>
        <div class="col-md-7" style="margin-left:150px;margin-top:10px">
            <div class="row tithead">

                <div class="col-md-4"><h3 class="glyphicon glyphicon-road"> 录入预约信息
                </h3></div>
                <div class="col-md-6"></div>

                <div class="col-md-2" style="margin-top:20px">
                    <h4>
                        <a href="index.html" style="text-decoration:none;color: #666666">
                            首页 <i class="glyphicon glyphicon-home"></i>
                        </a>
                    </h4>
                </div>

            </div>
            <div class="row">
                <div class="col-md-12">
                    <div>

                        <!-- Nav tabs -->
                        <ul class="nav nav-tabs" role="tablist">
                            <li role="presentation" class="active">
                                <a href="#coa" aria-controls="coa" role="tab" data-toggle="tab">课程基本信息</a>
                            </li>
                        </ul>

                        <!-- Tab panes -->
                        <div class="tab-content">
                            <div role="tabpanel" class="tab-pane active" id="coa">
                                <div class="form-group mrow">
                                    <div class="input-group">
                                        <label class="input-group-addon">学员姓名</label>
                                        <select v-model="param.stuId" class="form-control"  placeholder="请输入教练姓名" readonly id="sele" @change="schange">
                                            <option value="0">请选择学员</option>
                                            <option v-for="s in students" :value="s.stuId">{{s.stuName}}</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group mrow">
                                    <div class="input-group">
                                        <label class="input-group-addon">学员电话</label>
                                        <input v-model="phone" class="form-control" readonly>
                                    </div>
                                </div>
                                <div class="form-group mrow">
                                    <div class="input-group">
                                        <label class="input-group-addon">教练姓名</label>
                                        <input v-model="param.coaName" class="form-control" readonly>
                                    </div>
                                </div>
                                <div class="form-group mrow">
                                    <div class="input-group">
                                        <label class="input-group-addon">课程时间</label>
                                        <!--<input v-model="classinfo.teaTime" class="form-control read" readonly id="date" placeholder="请输入时间">-->
                                        <input type="date" v-model="classinfo.teaTime" class="form-control" id="date" readonly>
                                    </div>
                                </div>
                                <div class="form-group mrow">
                                    <div class="input-group">
                                        <label class="input-group-addon">课程场次</label>
                                        <input v-model="classinfo.classSess" class="form-control"  readonly>
                                    </div>
                                </div>
                                <div class="form-group mrow">
                                    <div class="input-group">
                                        <label class="input-group-addon">课时数</label>
                                        <input v-model="classinfo.classHour" type="number" class="form-control" placeholder="请输入年龄" readonly>
                                        <label class="input-group-addon">小时</label>
                                    </div>
                                </div>
                                <div class="form-group mrow">
                                    <div class="input-group">
                                        <label class="input-group-addon">备注信息</label>
                                        <input v-model="classinfo.remark" class="form-control"  placeholder="请输入备注信息" readonly>
                                    </div>
                                </div>


                                <div class="row mrow">



                                    <div class="col-md-10">
                                        <p class="text-center msg" id="msg"></p>
                                    </div>
                                    <div class="col-md-2">
                                        <button @click="save" class="btn btn-primary btn-block">保存</button>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
            <div class="row text-right remark"><h5>备注：课程详细信息录入</h5></div>
        </div>
    </div>
</div>
</body>
</html>